<template>
  <div class="login_page flex_LevelVertical_center">
    <div class="content_box flex_VerticalLevel_center">
      <img class="code_img" :src="loginType ? getImageUrl('login_code') : getImageUrl('login_account')" @click="loginType = !loginType" />
      <div class="flex_LevelVertical_center" style="width: 100%">
        <img class="left_img" src="@/assets/img/login_left.png" />
        <div class="login_box">
          <div class="title">智慧云办公系统<span>0.0.1</span></div>
          <div v-if="loginType">
            <el-form ref="formRef" :model="formModel" :rules="formRules" size="large">
              <el-form-item prop="username">
                <el-input v-model="formModel.username" placeholder="请输入 OA 账号" clearable></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="formModel.password" placeholder="请输入 OA 密码" maxlength="12" show-password></el-input>
              </el-form-item>
              <div class="text_box flex_Level_sb_VerticalCenter">
                <div>联系技术：<span>17888888888</span></div>
                <div class="forgot_password">忘记密码？</div>
              </div>
              <el-button type="primary" round :loading="loading" @click="submitForm(formRef)">{{ loading ? '正在登录' : '立即登录' }}</el-button>
            </el-form>
          </div>
          <div v-else>二维码</div>
        </div>
      </div>
      <img class="right_img" src="@/assets/img/login_right.png" />
      <div class="attention">为了确保个人信息安全，在任何情况下都不要将您公司的相关账号密码告诉他人；若有泄漏或异常事件发生，请反馈公司 IT 同事，并及时更改账号密码。</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { menuList } from '@/utils/class'
import { getTreeMenuButtonList } from '@/utils/common'
import { ref, reactive } from 'vue'
import { menuStore } from '@/store'
import { useRouter } from 'vue-router'
const menu = menuStore()
const router = useRouter()

// 获取图片
const getImageUrl = (name: string) => {
  return new URL(`../../../assets/img/${name}.png`, import.meta.url).href
}

// 登录方式（true：账号登录   false：扫码登录）
const loginType = ref<boolean>(true)

// 表单数据
const loading = ref<boolean>(false)
const formRef = ref<FormInstance>()
const formModel = reactive({
  username: '',
  password: ''
})
const formRules = reactive<FormRules>({
  username: [{ required: true, message: 'OA 账号不能为空', trigger: 'blur' }],
  password: [{ required: true, message: 'OA 密码不能为空', trigger: 'blur' }]
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) accountLogin()
    else console.log('error submit!', fields)
  })
}

// 账号登录
const accountLogin = () => {
  loading.value = true
  ElMessage({ type: 'success', message: '登录成功', duration: 2000 })
  menu.menuList = getTreeMenuButtonList(menuList).menuArray
  menu.headerActive = getTreeMenuButtonList(menuList).menuArray[0].code
  menu.buttonAuth = getTreeMenuButtonList(menuList).buttonArray
  menu.asideList = getTreeMenuButtonList(menuList).menuArray[0].children
  if (menu.asideList.length > 0 && menu.headerActive !== '2') {
    menu.asideActive = getTreeMenuButtonList(menuList).menuArray[0].children[0].code
    setTimeout(() => {
      router.replace(menu.asideList[0].path)
    }, 2000)
  } else {
    menu.asideActive = ''
    setTimeout(() => {
      router.replace(menu.menuList[0].path)
    }, 2000)
  }
  window.sessionStorage.setItem('token', '123456789')
}

// 扫码登录
const codeLogin = () => {}
</script>

<style scoped lang="scss">
.login_page {
  width: 100vw;
  height: 100vh;
  min-width: $min_width;
  min-height: $min_height;
  background: url('@/assets/svg/login_bg.svg') no-repeat;
  background-size: cover;

  .content_box {
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    backdrop-filter: blur(8px);
    background: rgba($color: #ffffff, $alpha: 0.6);
    border-radius: $border_radius;
    box-shadow: 0 0 6px 2px #dedede;
    position: relative;

    .code_img {
      width: 100px;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
    }

    .left_img {
      width: 40%;
      margin-right: 10%;
    }

    .login_box {
      width: 30%;
      max-width: 400px;
      height: 350px;

      .title {
        font-size: 40px;
        margin-bottom: 50px;

        span {
          font-size: 20px;
          position: relative;
          top: -20px;
          left: 10px;
          color: #ec4a35;
        }
      }

      .text_box {
        font-size: 14px;
        margin: 20px 0 30px;

        span {
          color: $color;
        }

        .forgot_password {
          cursor: pointer;
          color: $color;
        }
      }

      .el-button {
        width: 100%;
        height: 44px;
        border-radius: 22px;
        font-size: 16px;
        margin-top: 30px;
      }
    }

    .right_img {
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .attention {
      position: absolute;
      bottom: 20px;
    }
  }
}
</style>
